<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-22 17:50:05
 * @LastEditTime: 2024-06-24 17:48:19
-->
<script lang="ts" setup>
import { ref } from 'vue';
import { props } from '../props';
const { data, rules, labelWidth, constants } = defineProps(props);
import type { FormInstance } from 'element-plus';
const formRef = ref<FormInstance>();
const resetForm = () => {
    if (!formRef.value) return;
    formRef.value.resetFields();
};
const validateForm = async () => {
    if (!formRef.value) return;
    return await formRef.value.validate((valid: any) => {
        return valid;
    });
};

defineExpose({
    resetForm,
    validateForm
});
</script>
<template>
    <el-form ref="formRef" :rules="rules" :model="data" :label-width="labelWidth" class="custom-form">
        <el-row :gutter="50">
            <el-col v-for="item in constants" :span="item.span">
                <el-form-item v-if="item.mode == 'input'" :label="item.label" :prop="item.prop">
                    <el-input v-model="data[item.prop]" :placeholder="item.placeholder" :clearable="item.clearable" :style="{ width: item.width }" />
                </el-form-item>
                <el-form-item v-if="item.mode == 'select'" :label="item.label" :prop="item.prop">
                    <el-select-v2 v-model="data[item.prop]" :options="item.options" :placeholder="item.placeholder" :style="{ width: item.width }" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<style lang="scss" scoped></style>
